<template>
  <swiper :options="swiperOption"
          @touchEnd="touchEnd"
          ref="mySwiper"
          class="goods-swiper">
    <!-- slides -->
    <swiper-slide v-for="item in list"><img :src="item.img" class="s-img"></swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>

<script>
  import 'swiper/dist/css/swiper.css'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  export default {
    props: {
      list: Array
    },
    data() {
      return {
        swiperOption: {
          pagination :{
            el:'.swiper-pagination'
          }
        }
      }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    },
    methods: {
			touchEnd(e){
				let tr=this.swiper.translate;
				let width = e.target.clientWidth * this.list.length-e.target.clientWidth;
				if(-tr>width){
					this.$emit('touchEnd');
        }
      }
    },
    components: {
      swiper,
      swiperSlide
    }
  }
</script>

<style lang="less" scoped>
  @import '../../common/less/variable';
  .goods-swiper{
    position: relative;
    .s-img{
      width: 100%;
    }
    .swiper-pagination {
      position: absolute;
      z-index: 20;
      bottom: 10px;
      width: 100%;
      text-align: center;
      //display: none;
    }
    .swiper-pagination-bullet-active{
      background-color: @color-theme;
      width: 15px;
      border-radius: 5px;
    }
    .swiper-pagination-bullet {
      transition: all,0.2s;
    }
  }
</style>
